<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

	<title>JavaScript A* Demo</title>
	
	<link type="text/css" href="css/main.css" rel="stylesheet">
	
	<script type="text/javascript" src="js/lib/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/lib/jcanvas.min.js"></script>	
	
	<script type="text/javascript" src="js/astar/AStarConstants.js"></script>
	<script type="text/javascript" src="js/astar/Node.js"></script>
	<script type="text/javascript" src="js/astar/Area.js"></script>
	<script type="text/javascript" src="js/astar/DistanceCalculator.js"></script>
	<script type="text/javascript" src="js/astar/NodeList.js"></script>
	<script type="text/javascript" src="js/astar/NodeOpenList.js"></script>
	<script type="text/javascript" src="js/astar/AStar.js"></script>
	<script type="text/javascript" src="js/astar/Path.js"></script>
	
	<script type="text/javascript" src="js/astarDemoUtils/UtilsConstants.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/GameLoop.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/Sprite.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/CellSprite.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/InputHandler.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/CellSpritesCreator.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/DebugConsole.js"></script>
	<script type="text/javascript" src="js/astarDemoUtils/CellSpritesContext.js"></script>
	
	<script type="text/javascript" src="js/astarDemoMenu/MenuConstants.js"></script>
	<script type="text/javascript" src="js/astarDemoMenu/MenuManager.js"></script>
	
	<script type="text/javascript">
	
		var debugConsole;
		var menuOutputConsole;
		var menuManager;
	
		$(document).ready(main);
		
		function main() {
			debugConsole = new DebugConsole($("#debugConsoleDiv"));
			
			menuOutputConsole = new DebugConsole($("#menuOutputConsole"));
			menuManager = new MenuManager(menuOutputConsole);
			$('input[name="userInputType"]').change(function() {
				menuManager.setPlaceType($(this).val());
			});
			
			fps = 30;
			canvas = $("canvas");
			
			cellSpritesCreator = new CellSpritesCreator(canvas,300, 300, 1000/fps, menuManager, debugConsole);		
			cellSpritesContext = cellSpritesCreator.create(15);
			$('#clearAll').click(function() {
				cellSpritesContext.clear();
			});
			sprites = cellSpritesContext.getCellSprites();
			
			inputHandler = new InputHandler(canvas, sprites);
			inputHandler.startListening();
			
			gameLoop = new GameLoop(sprites,canvas,fps);
			gameLoop.start();
		}
	</script>
</head>
<body>
	<center>
	<table id="layoutTable">
		<tr>
			<td colspan="2">
				<div id="topDiv" style="font-weight: bold;">JavaScript A* Demo</div>
			</td>
		</tr>
		<tr>
			<td style="width: 300px;">
				<div id="canvasDiv">
					<canvas id="canvas" height="300px" width="300px">
					</canvas>
				</div>
			</td>
			<td style="vertical-align: top;text-align: left;width: auto;padding-left:30px;">
				<div id="menuDiv">
					Place: 
					<br>
					
					<input type="radio" name="userInputType" value="0" checked="checked">
					<span style="background-color: #000000;border:1px solid black;">&nbsp;&nbsp;&nbsp;</span> 
					impassable obstacle
					<br>
					
					<input type="radio" name="userInputType" value="2">
					<span style="background-color: #808080;border:1px solid black;">&nbsp;&nbsp;&nbsp;</span>
					somewhat passable obstacle
					<br>
					
					<input type="radio" name="userInputType" value="1">
					<span style="background-color: #FFFFFF;border:1px solid black;">&nbsp;&nbsp;&nbsp;</span>
					(completly) passable terrain
					<br><br>
					&nbsp;&nbsp;
					&nbsp;&nbsp;
					<span style="background-color: #FFFFFF;border:1px solid black;">&nbsp;.&nbsp;</span>
					explored node
					<br>
					
					<input type="radio" name="userInputType" value="3">
					<span style="background-color: #E10000;border:1px solid black;font-family:Verdana, sans-serif;font-size:8pt;font-weight: bold;">&nbsp;S&nbsp;</span>
					path start
					<br>
					
					<input type="radio" name="userInputType" value="4">
					<span style="background-color: #E10000;border:1px solid black;font-family:Verdana, sans-serif;font-size:8pt;font-weight: bold;">&nbsp;E&nbsp;</span>
					path end<br>
					<br>
					<br>
					
					<input id="clearAll" type="button" value="Clear All">
					<br>
					<br>
					<br>
					>>> <span id="menuOutputConsole" style="color:#FFA500;">Place impassable obstacle(s)</span>
				</div>
			</td>	
		</tr>	
		<tr>
			<td colspan="2">
				<div id="debugConsoleDiv">
				</div>
			</td>
	</table>
	</center>
</body>
</html>